<template>
  <SnelPage :config="pageConfig" ref="page">
    <!-- S pagebg -->
    <div class="pagebg">
      <div class="pic"><img src="../assets/images/cs-film-bg.jpg" width="1920" height="1080" /></div>
    </div>
    <!-- E pagebg -->
    <!-- S content -->
    <div class="wrapper">
      <div class="scrollBox" id="container">
        <!-- S head -->
        <div class="headline" style="left: 360px">电视剧</div>
        <!-- E head -->
        <div class="cs-menu">
          <SnelArea class="scrollBox" :config="area0Config">
            <div class="item">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">频道</div>
            </div>
            <div class="item" style="top: 162px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">少儿</div>
            </div>
            <div class="item" style="top: 324px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">电影</div>
            </div>
            <div class="item" style="top: 486px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">电视剧</div>
            </div>
            <div class="item" style="top: 648px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">综艺</div>
            </div>
            <div class="item" style="top: 810px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">纪实</div>
            </div>
            <div class="item" style="top: 972px">
              <div class="line bounce"></div>
              <div class="link"></div>
              <div class="txt">游戏</div>
            </div>
          </SnelArea>
        </div>
        <!-- E menu  -->
        <!-- S left nav -->
        <div class="cs-leftnav" style="left: 320px">
          <div class="cs-box">
            <SnelArea class="scrollBox" :config="area1Config">
              <!--通过top值实现上下滑屏；初始值为top:150px; top=100*N+150 ;-->
              <!-- <div class="item">
                <div class="link"></div>
                <div class="line bounce"></div>
                <div class="icon icon01"></div>
                <div class="txt txt-one">搜索</div>
              </div>
              <div class="item" style="top: 100px">
                <div class="line bounce"></div>
                <div class="link"></div>
                <div class="icon icon02"></div>
                <div class="txt txt-one">筛选</div>
              </div> -->
              <div class="item" v-for="(s, i) in s2" :key="i" :style="{ top: `${200 + i * 100}px` }">
                <div class="line bounce"></div>
                <div class="link"></div>
                <div class="txt">{{ s }}</div>
              </div>
            </SnelArea>
          </div>
        </div>
        <!-- E left nav -->
        <!-- S list -->
        <div class="w-listAll w-list08 cs-list" style="top: 130px; left: 610px; width: 1920px; height: 950px; overflow: hidden">
          <SnelArea class="scrollBox" style="top: px; margin: 20px 0 0 60px" :config="area2Config">
            <div
              class="item ui-breathLight-element"
              v-for="(a, i) in area2Config.data"
              :key="a"
              :style="{ left: `${(i % 5) * 292}px`, top: `${Math.floor(i / 5) * 458}px` }"
            >
              <div class="pic"><img src="../assets/images/demopic/pic-262x358.jpg" /></div>
              <div class="txt-wrap txt-wrap-style02">
                <div class="txt" :d="a">{{ a }}归还世界给你了哈设计客户</div>
                <div class="play"></div>
              </div>
            </div>
          </SnelArea>
        </div>
        <!-- E list -->
      </div>
      <!-- S 页数 -->
      <div class="cs-pages">
        <div class="txt">最新上线：568部</div>
      </div>
      <!-- E 页数 -->
      <!-- E content -->
    </div>
  </SnelPage>
</template>

<script>
import '@/assets/css/reset.css';
import '@/assets/css/index.css';
import '@/assets/css/list.css';
export default {
  name: 'List',
  data() {
    return {
      s2: ['精彩推荐', '最新上线', '青春偶像', '古装言情', '搞笑喜剧', '年代传奇', '军旅谍战', '家庭生活'],
      /** @type {SnelPage} */
      pageConfig: {
        areaId: 2,
        areaIndex: 5,
        slide: {
          containerId: 'container',
          slideDir: 'h',
          values: [0, -250, -250],
          slideFree: true,
        },
      },
      /** @type {SnelArea} */
      area0Config: {
        outMoveDir: [-1, -1, -1, 1],
        record: true,
        initRecord: 0,
        slide: {
          startIndex: 3,
        },
        focusAfter: (area) => {
          const index = area.currentIndex;
          if (area.recordIndex !== index) {
            this.s2 = [];
            this.area2Config.data = [];
            setTimeout(() => {
              this.s2 = ['古装言情', '搞笑喜剧'];
              this.area2Config.data = [];
            }, 1000);
          }
        },
      },
      /** @type {SnelArea} */
      area1Config: {
        outMoveDir: [-1, 0, -1, 2],
        record: true,
        initRecord: 5,
        select: true,
        slide: {
          startIndex: 5,
        },
        focusAfter: (area) => {
          const index = area.currentIndex;
          if (index > 1 && area.recordIndex !== index) {
            this.area2Config.data = [32, 33];
          }
        },
      },
      /** @type {SnelArea} */
      area2Config: {
        data: null,
        rowCount: 3,
        colCount: 5,
        outMoveDir: [-1, 1, -1, -1],
        record: true,
        slide: {
          mode: 'computed',
          step: 458,
        },
        paging: {
          size: 10,
          total: 25,
        },
        // marqueeConfig: {
        //   direction: 'right',
        // },
        keyOk: (area) => {
          const index = area.currentIndex;
          this.area2Config.data.splice(index, 1);
        },
        // focusAfter(area) {
        //   console.log('area.config.rowCount: ', area.config.rowCount);
        //   console.log(area.direction);
        //   console.log('area.currentIndex: ', area.currentIndex);
        //   console.log('area.curPage: ', area.curPage);
        //   console.log('area.totalPage: ', area.totalPage);
        //   const row = area.getCurrentRow();
        //   console.log('row: ', row);
        // },
        prevPage: (area) => {
          console.log(area.curPage);
        },
        nextPage: (area) => {
          console.log(area.curPage);
        },
      },
    };
  },
  mounted() {
    /** @type {SnelPage} */
    const page = this.$refs.page;
    const data = new Array(12).fill(null).map((_, i) => i);
    this.area2Config.data = data;
    page.init();
    setTimeout(() => {
      this.area2Config.data = new Array(32).fill(null).map((_, i) => i);
    }, 3000);
  },
};
</script>
